import React, { Component, useState } from 'react';
import { Alert, StyleSheet, TouchableOpacity } from 'react-native';
import {
  View,
  Text,
  Constants,
  SortableGridList,
  Card,
  Spacings,
  BorderRadiuses,
  GridListProps,
  SortableGridListProps,
  Button,
} from 'react-native-ui-lib';
import _ from 'lodash';
import products from '../../data/products';
import { TestCase, TestSuite } from '@rnoh/testerino';

const productsWithIds = products.map(product => ({ ...product }));
type Item = (typeof productsWithIds)[0];





class SortableGridListScreen extends Component {
  state = {
    orientation: Constants.orientation,
    selectedItemId: undefined,
    items: productsWithIds,
    removedItems: [] as Item[],
  };
  itemsOrdered = this.state.items;

  onOrderChange: SortableGridListProps['onOrderChange'] = (
    newOrderedData,
    newOrder,
  ) => {
    this.itemsOrdered = newOrderedData;
    console.log('newOrder:', newOrder);
    Alert.alert('onOrderChange  newOrder:' + newOrder);
  };

  selectItem = ({ customValue: id }: { customValue: number }) => {
    const { selectedItemId } = this.state;
    if (id === selectedItemId) {
      this.setState({ selectedItemId: undefined });
    } else {
      this.setState({ selectedItemId: id });
    }
  };

  removeSelectedItem = () => {
    const { selectedItemId, removedItems } = this.state;
    if (!_.isUndefined(selectedItemId)) {
      const newItems = [...this.itemsOrdered];
      const removed = _.remove(newItems, item => item.id === selectedItemId);
      removedItems.push(removed[0]);
      this.setState({ items: newItems, selectedItemId: undefined, removedItems });
      this.itemsOrdered = newItems;
    }
  };

  addItem = () => {
    const { removedItems } = this.state;
    const itemToAdd = removedItems.pop();
    if (itemToAdd) {
      this.itemsOrdered.push(itemToAdd);
      const newItems = [...this.itemsOrdered];

      this.setState({ items: newItems, selectedItemId: undefined, removedItems });
    }
  };

  renderItem: GridListProps<Item>['renderItem'] = ({ item }) => {
    const { selectedItemId } = this.state;
    return (
      <Card
        flex
        onPress={this.selectItem}
        customValue={item.id}
        selected={item.id === selectedItemId}>
        <Card.Section
          imageSource={{ uri: item.mediaUrl }}
          imageStyle={styles.itemImage}
          imageProps={{
            customOverlayContent: (
              <Text margin-s1 h1 orange30 themeColor>
                {item.id}   {selectedItemId}
              </Text>
            ),
          }}
        />
      </Card>
    );
  };



  render() {
    const { items, removedItems, selectedItemId } = this.state;

    return (
      <TestSuite name="SortableGridList">
        <TestCase itShould="设置data、renderItem、onOrderChange、extraData(点击一个item)">
          <View padding-20>
            <View flex>
              <Text h1 margin-s5>
                SortableGridList
              </Text>
              <View flex>
                <SortableGridList
                  flexMigration
                  data={items}
                  renderItem={this.renderItem}
                  // numColumns={2}
                  maxItemWidth={140}
                  itemSpacing={Spacings.s3}
                  // itemSpacing={0}
                  listPadding={Spacings.s5}
                  // keepItemSize
                  contentContainerStyle={styles.list}
                  onOrderChange={this.onOrderChange}
                  extraData={selectedItemId}
                />
              </View>
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  list: {
    paddingTop: Spacings.s5,
  },
  itemImage: {
    width: '100%',
    // height: 85,
    height: 108.7,
    borderRadius: BorderRadiuses.br10,
  },
});

export default SortableGridListScreen;
